<template>
	<view class="page container">
		<u-navbar title="微信支付" :is-back="false" :border-bottom="false"></u-navbar>
		<view class="friendly">
			<image src="https://files.yzsheng.com/client/weixin/iconzanwuxinxi.png" mode="widthFix"></image>
		</view>
		<view class="content">
			<view class="status-box">
				<block v-if="isLoading">
					<view>支付中..</view>
				</block>
				<block v-if="isSuccess">
					<i-icon size="150rpx" icon="icongou1" color="rgb(37,155,36)"></i-icon>
					<view style="margin-top: 30rpx;">支付成功，请返回商户</view>
				</block>
				<block v-if="isCancel">
					<i-icon size="150rpx" icon="icongantanhao2" color="rgb(153,153,153)"></i-icon>
					<view style="margin-top: 30rpx;">您已取消支付</view>
				</block>
				<block v-if="isFail">
					<i-icon size="150rpx" icon="iconchacha1" color="rgb(233,54,54)"></i-icon>
					<view style="margin-top: 30rpx;">支付失败，请重新支付</view>
				</block>
			</view>
			<block v-if="isFail || isCancel">
				<button type="primary" v-if="appOrderJson.OrderId" class="pay-button"
					@click="appPayGeicode"><text>重新支付</text></button>
				<button type="primary" v-else class="pay-button" @click="toPayApp"><text>重新支付</text></button>
			</block>
			<block v-if="isLoading">
				<button class="btn" type="primary" disabled="true"><text>返回商家</text></button>
			</block>
			<block v-else>
				<button class="btn" type="primary" open-type="launchApp" :app-parameter="status"
					@click="launchAppError"><text>返回商家</text></button>
			</block>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isShow: false,
				isLoading: false,
				isSuccess: false,
				isFail: false,
				isCancel: false,
				timeStamp: '',
				nonceStr: '',
				package: '',
				paySign: '',
				signType: '',
				status: 0, // 0: 已取消(未付)，1：已支付，2：支付失败
				appOrderJson: {
					OrderId: ""
				}, //app端创传过来的订单信息 里面有订单id 支付模块payModule 支付的相关数据等
				xcxToken: "", //以前的token 后面赋值以后支付完成又还原回去

			}
		},
		onLoad(options) {
			console.log(options)
			//获取小程序端的token存放起来
			if (uni.getStorageSync("token")) {
				this.xcxToken = uni.getStorageSync("token")
			}
			//判断手机订单的json是否有
			if (options.appOrderJson) {
				let orderJson = JSON.parse(options.appOrderJson)
				this.appOrderJson.OrderId = orderJson.orderId
				this.appOrderJson.PayModule = orderJson.payModule
				this.appOrderJson.PayType = 1 //微信支付使用的1  余额0  支付宝2 银行卡3
				//将app端的token放到小程序端
				uni.setStorageSync("token", orderJson.token)
				this.appPayGeicode()
			} else {
				this.timeStamp = options.timeStamp || '',
					this.nonceStr = options.nonceStr || '',
					this.package = options.package || '',
					this.paySign = options.paySign || ''
				this.signType = options.signType || ''

				// if(this.isShow){
				this.toPayApp()
				// }
			}

		},
		onBackPress() {
			return true
		},
		onReady() {
			this.isShow = true
		},
		//还原小程序
		onUnload() {
			if (this.xcxToken) {
				uni.setStorageSync("token", this.xcxToken)
			}
			uni.redirectTo({
				url: '/pages/index/index'
			})
		},
		//还原小程序
		onHide() {
			if (this.xcxToken) {
				uni.setStorageSync("token", this.xcxToken)
			}
			uni.redirectTo({
				url: '/pages/index/index'
			})
		},
		methods: {
			// app端带有订单json时使用的方法
			appPayGeicode() {
				let _this = this
				wx.login({
					success(code) {
						let data = _this.appOrderJson
						data.Code = encodeURIComponent(code.code)
						_this.$api.selfServiceCarWash.selfServiceCarWash(data).then(payData => {
							console.log(payData)
							_this.isLoading = true
							let payInfo = JSON.parse(payData.data.payInfo)
							uni.requestPayment({
								'timeStamp': payInfo.timeStamp,
								'nonceStr': payInfo.nonceStr,
								'package': payInfo.package,
								'paySign': payInfo.paySign,
								'signType': payInfo.signType,
								success: res => {
									_this.isLoading = false,
										_this.isSuccess = true,
										_this.status = 1
									uni.showToast({
										title: '支付成功',
									})
								},
								fail: res => {
									if (res.errMsg === "requestPayment:fail cancel") {
										_this.isLoading = false
										_this.isCancel = true
										_this.status = 0
										uni.showToast({
											title: '您已取消支付',
										})
									} else {
										_this.isLoading = false
										_this.isFail = true
										_this.status = 2
										uni.showToast({
											title: '支付失败，请重新支付',
											icon: 'none'
										})
									}
								}
							})
						})
					}
				})
			},
			toPayApp() {
				var that = this
				if (!that.timeStamp || !that.nonceStr || !that.package || !that.paySign || !that.signType) {
					uni.showToast({
						title: '无效的支付请求，请返回商户重试',
						icon: 'none'
					})
					return false
				}
				if (that.isLoading) {
					return false
				}
				that.isLoading = true
				uni.requestPayment({
					'timeStamp': that.timeStamp,
					'nonceStr': that.nonceStr,
					'package': that.package,
					'paySign': that.paySign,
					'signType': that.signType,
					success: res => {
						that.isLoading = false,
							that.isSuccess = true,
							that.status = 1
						uni.showToast({
							title: '支付成功，请返回商户',
						})
					},
					fail: res => {
						if (res.errMsg === "requestPayment:fail cancel") {
							that.isLoading = false,
								that.isCancel = true,
								that.status = 0
							uni.showToast({
								title: '您已取消支付',
							})
						} else {
							that.isLoading = false,
								that.isFail = true,
								that.status = 2
							uni.showToast({
								title: '支付失败，请重新支付',
								icon: 'none'
							})
						}
					}
				})
			},
			launchAppError(e) {
				uni.switchTab({
					url: '/pages/index/index'
				})
			}
		}
	}
</script>

<style lang="scss">
	.page {
		position: relative;
		height: 100%;
		background-color: #fff;
	}

	.friendly {
		margin: 100rpx auto 0rpx;
		text-align: center;

		image {
			width: 300rpx;
		}

		.text {
			color: #FFE23E;
			font-size: 36rpx;
		}
	}

	.content {
		padding: 0 40rpx;
		color: #666;
	}

	.status-box {
		padding: 60rpx 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.pay-button {
		margin-bottom: 30rpx;
		background: linear-gradient(-90deg, #FBD220, #FFE23E);
		color: #333333;
	}

	.btn {
		background: linear-gradient(-90deg, #FBD220, #FFE23E);
		color: #333333;
	}

	.pay-icon {
		margin-bottom: 30rpx;
	}
</style>
